<template>
  <div class="result" :style="resultStyle" >
    <img :src="resultIcon"> 
    <span><i class="best">最好成绩:</i><em class="best">{{$store.state.bestAnimals}}</em> </span>
  </div>
</template>
<script>
import Utils from './../utils.js'
export default {
  name: "myOrderResult",
  data () {
    return {
      resultStyle:{
        'background-image': `url(${Utils.imgs.result})`
      },
      resultIcon:Utils.imgs.resultIcon,
      max:12,
      order:1000,
    };
  },
  computed:{
    
  },
  mounted(){
 
  },
  methods:{
 
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common';
.result{
  // position: absolute;
  // left:px2rem(100);
  display: inline-block;
  //width:60%;
  @include bg-img();
  color:#f66061;
  //@include font-dpr(32px);
  font-size: px2rem(22);
  //text-indent: 8%;
  text-align: left;
  height: px2rem(80);
  //background-color: green;
  //line-height: px2rem(60);
  vertical-align: top;
  img{
    vertical-align: top;
    height: px2rem(37);

    margin:px2rem(16) px2rem(4) px2rem(0) px2rem(40);
  }
  span{
    //vertical-align: top;
    display: inline-block;
    // margin-top: px2rem(8);
    height: px2rem(80);
    line-height: px2rem(72);
    //@include font-dpr(32px);
    //font-size: px2rem(36);
    padding-right: px2rem(30);
    vertical-align: top;
    em{
      display: inline-block;
      height: 100%;
      font-style: normal;
      padding-left:  px2rem(10);
      padding-right: px2rem(10);
    }
    i{
      font-style: normal;
    }
    .best{
      font-size: px2rem(32);
    }
  }
  
  
  // @include px-dpr(height,80px);
  // @include px-dpr(line-height,70px);
}
</style>